<!--
    by: yuanbiao 2023年02月15日
    name: 工具栏
    notes:
-->
<template>
    <div :class="['cmp', 'cmp-toolsbar', { expand }]">
        <div class="head"></div>
        <div class="body">
            <div class="tools-list">
                <div class="tools-item" v-for="(v, i) in toolsList" :key="i" @click="toolsItemClick(v)">
                    <div class="icon"><i :class="v.icon"></i></div>
                    <div class="label">{{ v.label }}</div>
                </div>
            </div>
        </div>
        <div class="foot"></div>
        <div class="controller" @click="switchHandler"></div>
        <!-- 自定义请求头 -->
        <cmpMessageBox ref="reqMessageBox" title="自定义请求头" width="50vw" height="28.87vw" padding="2vw 3.5vw 1.75vw">
            <div slot="body" class="msgbox-body-content">
                <textarea v-model="reqHeaders" placeholder="输入格式为标准JSON字符串"></textarea>
            </div>
            <div slot="footer" class="text-center">
                <x-button type="brown" size="small" @click="closeMessageBox('req')" plain>取消</x-button>
                <x-button type="brown" size="small" @click="confirmMessageBox('req')">确定</x-button>
            </div>
        </cmpMessageBox>
        <!-- 自定义响应头 -->
        <cmpMessageBox ref="resMessageBox" title="自定义响应头" width="50vw" height="28.87vw" padding="2vw 3.5vw 1.75vw">
            <div slot="body" class="msgbox-body-content">
                <textarea v-model="resHeaders" placeholder="输入格式为标准JSON字符串"></textarea>
            </div>
            <div slot="footer" class="text-center">
                <x-button type="brown" size="small" @click="closeMessageBox('res')" plain>取消</x-button>
                <x-button type="brown" size="small" @click="confirmMessageBox('res')">确定</x-button>
            </div>
        </cmpMessageBox>
    </div>
</template>

<script>
import cmpMessageBox from '@/components/cmp-message-box.vue'
const { remote } = global.require('electron')
const { session } = remote

export default {
    name: 'toolsbar',
    components: {
        cmpMessageBox,
    },
    data() {
        return {
            reqHeaders: '',
            resHeaders: '',
            toolsList: [
                { name: 'reqHeaders', type: 'req', icon: 'fa fa-sign-out', label: '请求头' },
                { name: 'resHeaders', type: 'res', icon: 'fa fa-sign-in', label: '响应头' },
            ],
            expand: false,
        }
    },
    methods: {
        // 展开收缩常驻工具栏
        switchHandler() {
            this.expand = !this.expand
        },
        toolsItemClick(item) {
            let type = item.type
            this.$refs[`${type}MessageBox`] && this.$refs[`${type}MessageBox`].show()
        },
        closeMessageBox(type) {
            this.$refs[`${type}MessageBox`] && this.$refs[`${type}MessageBox`].close()
        },
        confirmMessageBox(type) {
            this[`${type}HeadersSetter`] && this[`${type}HeadersSetter`]()
            this.$refs[`${type}MessageBox`] && this.$refs[`${type}MessageBox`].close()
        },
        // 设置reqHeaders
        reqHeadersSetter() {
            let filters = { urls: ['*://*/*'] }
            let reqHeaders = this.$jstools.jsonParse(this.reqHeaders)
            session.defaultSession.webRequest.onBeforeSendHeaders(filters, (details, callback) => {
                // for (let key in reqHeaders) {
                //     details.requestHeaders[key] = reqHeaders[key] || ''
                // }
                let requestHeaders = {...details.requestHeaders, ...reqHeaders}
                callback({ cancel: false, requestHeaders })
            })
        },
        // 设置resHeaders
        resHeadersSetter() {
            let filters = { urls: ['*://*/*'] }
            let resHeaders = this.$jstools.jsonParse(this.resHeaders)
            session.defaultSession.webRequest.onHeadersReceived(filters, (details, callback) => {
                // details.responseHeaders['X-Frame-Options'] = 'AllowAll'
                // details.responseHeaders['content-security-policy'] = ''
                // for (let key in resHeaders) {
                //     details.responseHeaders[key] = resHeaders[key] || ''
                // }
                let responseHeaders = {...details.responseHeaders, ...resHeaders}
                callback({ cancel: false, responseHeaders })
            })
        },
    },
    mounted() {
        this.reqHeaders = JSON.stringify({
            'Referer': ''
        })
        this.resHeaders = JSON.stringify({
            'x-frame-options': 'AllowAll',
            'X-Frame-Options': 'AllowAll',
            'content-security-policy': '',
            'Content-Security-Policy': ''
        })
        this.reqHeadersSetter()
        this.resHeadersSetter()
    }
}
</script>

<style lang="less" scoped>
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";

.cmp-toolsbar {
    width: 6.25vw;
    border: 1px solid #D0BA94;
    position: fixed;
    right: -6.25vw;
    top: 30%;
    z-index: 1000;
    transition: right .25s linear;

    .head {
        height: 3.125vw;
        border-bottom: 1px solid #D0BA94;
        background: #FFF2DB url("~@/assets/images/public/toolbar-head-bg.png") no-repeat left top;
        background-size: 100% 100%;
    }

    .body {
        background-color: #FBF8F3;

        .tools-list {
            padding: 1vw .5vw;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .tools-item {
            color: @colorPrimary;
            text-align: center;
            cursor: pointer;

            .icon {
                height: 4vw;
                line-height: 4vw;
                font-size: 2vw;
                background: url("~@/assets/images/public/toolbar-item-bg.png") no-repeat center/contain;
            }

            .label {
                height: 2vw;
                line-height: 2vw;
                font-size: 1vw;
            }

            &+.tools-item {
                margin-top: .5vw;
            }

            &:hover {
                .icon {
                    color: #fff;
                    background: url("~@/assets/images/public/toolbar-item-bg-active.png") no-repeat center/contain;
                }
            }
        }
    }

    .foot {
        height: 1.55vw;
        background: #FBF8F3 url("~@/assets/images/public/toolbar-foot-bg.png") no-repeat left bottom;
        background-size: 100% auto;
    }

    .controller {
        width: 1.3vw;
        height: 5.625vw;
        position: absolute;
        top: 50%;
        left: -1px;
        transform: translate(-100%, -50%);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 100% 100%;
        background-image: url("~@/assets/images/public/toolbar-show-r.png");
        cursor: pointer;
    }

    &.expand {
        right: 0;
        .controller {
            background-image: url("~@/assets/images/public/toolbar-close-r.png");
        }
    }
    .cmp-message-box {
        .msgbox-body-content {
            height: 100%;
            textarea {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: .5em;
                border-color: @borderGrey;
                resize: none;
            }
        }
        .x-button {
            margin: 0 10px;
        }
    }
}
</style>
